<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MAGNUS Technologies</title>
        <link rel="stylesheet" href="./static/jquery/jquery.mobile-1.1.0.css" />
		<script type="text/javascript" src="./static/jquery/jquery.js"></script>
		<script type="text/javascript" src="./static/jquery/jquery.mobile-1.1.0.js"></script>
		<!-- Stack mob lib -->
		<script type="text/javascript" src="./static/stackmob/json2-min.js"></script>
		<script type="text/javascript" src="./static/stackmob/underscore-1.3.0-min.js"></script>
		<script type="text/javascript" src="./static/stackmob/stackmob-js-0.2.1-min.js"></script>
		<script type="text/javascript" src="./static/stackmob/backbone-0.9.2-min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.mobile.loadingMessageTextVisible = true;
				StackMob.init({
					appName: "aem2",
				    clientSubdomain: "sumitteke",
				    apiVersion: 0
				});
			});
			
			var timeout = 3000;
			
			function register() {
				$.mobile.showPageLoadingMsg("a", "Please wait while we register...");
				var uname = document.getElementById('textinput2').value;
				var pwd = document.getElementById('textinput3').value;
				var cnfmpwd = document.getElementById('textinput4').value;
				if(pwd != cnfmpwd) {
					$.mobile.showPageLoadingMsg("a", "Password did not match", true);
					setTimeout(function() {
						$.mobile.hidePageLoadingMsg();
					}, timeout);
				} else {
					var user = new StackMob.User({ username: uname, password: pwd});
					user.create({
						success: function(model) {
							$.mobile.showPageLoadingMsg("a", "Registered Successfully");
							setTimeout(function() {
								$.mobile.hidePageLoadingMsg();
								var frm = document.getElementById('frmId');
								frm.submit();
							}, timeout);
						},
						error: function(model, response) {
							$.mobile.showPageLoadingMsg("a", "Registration failed. Please trye again...");
							setTimeout(function() {
								$.mobile.hidePageLoadingMsg();
							}, timeout);   	
						}
					});
				}
				
			}
		</script>
    </head>
    <body>
        <div data-role="page">
        	<!-- Header -->
            <div data-theme="b" data-role="header" data-position="fixed">
                <h3>Welcome to AEM</h3>
            </div>
            
            <!-- Content -->
            <div data-role="content">
                <form id="frmId" action="login.html" method="POST">
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <label for="textinput2">Email</label>
                            <input id="textinput2" placeholder="username" value="" type="text" />
                        </fieldset>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <label for="textinput3">Password</label>
                            <input id="textinput3" placeholder="password" value="" type="password" />
                        </fieldset>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <label for="textinput4">Confirm Password</label>
                            <input id="textinput4" placeholder="password" value="" type="password" />
                        </fieldset>
                    </div>
                    <a href="#" data-theme="c" data-icon="gear" data-iconpos="left" data-role="button" onclick="javascript:register()">Sign up</a>
                </form>
            </div>
            
            <!-- Footer -->
            <div data-theme="b" data-role="footer" data-position="fixed">
                <h3>MAGNUS Technologies</h3>
            </div>
        </div>
    </body>
</html>